<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Matt's tool for viewing images.">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="theme-color" content="#181a1b">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
        <script type="text/javascript">
            (function (c, l, a, r, i, t, y) {
                c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
                t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
                y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
            })(window, document, "clarity", "script", "r8os71r0gv");
        </script>
        <script src="{{ url_for('static', filename='index.js') }}"></script>
        {% if title %}
        <title>{{ title }} - ImageViewer</title>
        {% else %}
        <title>ImageViewer</title>
        {% endif %}
    </head>

    <body>
        {% if not platform.pc %}
        <div>
            {% if title %}
            <h1>{{ title }}</h1>
            {% else %}
            <h1>View beautiful pictures</h1>
            {% endif %}
            <p id="note">📱 Mobile devices friendly</p>
        </div>
        {% endif %}
        {% if platform.pc %}
        <div id="pics" style="display: flex;gap: 10px;">
            {% else %}
            <div id="pics">
                {% endif %}
                {% for pic in pics %}
                {% if platform.tablet %}
                <div class="pic" style="text-align: center;">
                    {% else %}
                    <div class="pic">
                        {% endif %}
                        {% if pic.r18 %}
                        <h2>🙈 {{ pic.title }}</h2>
                        {% else %}
                        <h2>🔭 {{ pic.title }}</h2>
                        {% endif %}
                        <p class="author">
                            <a href="{{ pic.author_url }}" target="_blank" rel="noopener noreferrer">{{ pic.author
                                }}</a>
                        </p>
                        <a href="{{ pic.url }}" target="_blank" rel="noopener noreferrer">
                            {% if platform.mobile %}
                            <img src="{{ pic.urls.small }}" alt="{{ pic.title }}" style="width: 100%;">
                            {% else %}
                            {% if platform.tablet %}
                            <img src="{{ pic.url }}" alt="{{ pic.title }}" style="width: 100%;">
                            {% else %}
                            <img src="{{ pic.urls.small }}" alt="{{ pic.title }}">
                            {% endif %}
                            {% endif %}
                        </a>
                        <div class="tags">
                            <h3 class="tags-header">🔗 Tags</h3>
                            <ul>
                                {% for tag in pic.server_tags %}
                                <li class="tag">
                                    <a href="{{ tag.href }}" target="_blank" rel="noopener noreferrer" class="tag-link">
                                        {{ tag.caption }}
                                    </a>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% if not platform.pc %}
                <p id='gototop'>
                    <a href="javascript:window.scrollTo(0, 0)">
                        🏠 Back to Top
                    </a>
                </p>
                {% endif %}
                <div id="footer">
                    <hr>
                    <p>🖼 Pictures Count: <strong>{{ count }}</strong></p>
                    <p>🎡 Request Args: <strong>{{ args }}</strong></p>
                </div>
    </body>

</html>